<template>
    <div class='y-test' v-if="false">
        <div class="box" ref="box">
            <span class="lft"></span>
            <span class="rlt"></span>
        </div>
    </div>
</template>
<script lang='ts' setup>
import { onMounted, ref } from 'vue';
const box = ref<HTMLDivElement>();
function mousemove(evt: PointerEvent) {
    console.log(evt);
    const node = (evt.target as HTMLDivElement);
    node.style.setProperty('--mouse-x', Math.round(evt.offsetX).toString());
    node.style.setProperty('--mouse-y', Math.round(evt.offsetY).toString());
}
onMounted(() => {
    if (box.value) {
        box.value.onpointermove = mousemove;
    }
});
</script>
<style lang='css' scoped>
.y-test {
    width: 100vw;
    height: 100vh;
    z-index: 6;
    position: fixed;
    padding-left: 10vw;
    padding-top: 10vw;

    .box {
        width: 300px;
        height: 300px;
        --mouse-x: 0;
        --mouse-y: 0;
        transform-origin: 50% 50%;
        background-color: rgb(100 100 100 / 20%);
        position: relative;
        &::before{
            width: 20px;
            height: 20px;
            background-color: rgb(0, 0, 0);
            translate: calc(var(--mouse-x) * 1px - 50%) calc(var(--mouse-y) * 1px - 50%);
            position: absolute;
            content: '';
        }
        .lft,
        .rlt {
            position: absolute;
            width: 20px;
            height: 20px;
            display: block;
            background-size: cover;
            border-top: 2px yellowgreen solid;
            background: linear-gradient(red, orange);
        }

        .lft {
            --my-x: 0;
            --my-y: 0;
            translate: calc((var(--my-x) * 1px)) calc(var(--my-y) * 1px);
            rotate: atan2(calc((var(--mouse-x) - var(--my-x) - 10) * 1), calc((var(--mouse-y) - var(--my-y) - 10) * -1));
        }

        .lft::after {
            content: '';
            width: 1px;
            height: 400px;
            position: absolute;
            left: 0;
            top: 0;
            height: 1px;
            background-color: blue;
            transform-origin: left;
            translate: 10px;
            border-left: 1px solid red;
        }

        .rlt {
            --my-x: 260;
            --my-y: 10;
            translate: calc((var(--my-x) * 1px)) calc(var(--my-y) * 1px);
            rotate: atan2(calc((var(--mouse-x) - var(--my-x) - 10) * 1), calc((var(--mouse-y) - var(--my-y) - 10) * -1));
        }
    }
}
</style>